<template>
    <div>
        <van-cell-group>
            <van-cell title="填写个人信息" title-style='color:#F65D5D'/>
        </van-cell-group>
        <div class="register-wrap">  
            <van-field 
                required
                clickable
                clearable
                size='large'
                maxlength='18'
                label='真实姓名：'
                v-model="username" 
                :left-icon="IconModal.nameIcon"
            />
            <van-field 
                required
                clickable
                clearable
                size='large'
                maxlength='18'
                label='我的昵称：'
                v-model="nickName" 
                :left-icon="IconModal.nickNameIcon"
            />
            <div class="spical-field">
                <van-field 
                    required
                    clickable
                    size='large'
                    :left-icon="IconModal.sexIcon"
                    >
                <div slot='label' class="diy-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</div>
                <div slot="input" class="spical-field-input flex-align-center">
                    <van-radio-group v-model="sexRadioModal" shape='square' class='flex-align-center'>
                        <van-radio name="1">男
                            <span
                            slot="icon"
                            slot-scope="props"
                            :class="[props.checked ?'active':'normal','sexRadio']">
                                <i></i>
                            </span>
                        </van-radio>
                        <van-radio name="2">女
                                <span
                            slot="icon"
                            slot-scope="props"
                            :class="[props.checked ?'active':'normal','sexRadio']">
                                <i></i>
                            </span>
                        </van-radio>
                    </van-radio-group>
                </div>
                </van-field>
            </div>
            <div class="spical-field">
                <van-field
                        required
                        clickable
                        size='large'
                        :left-icon="IconModal.educationLevelIcon"
                >
                    <div slot='label' class="diy-label">志愿类型：</div>
                    <div slot="input" class="spical-field-input flex-align-center">
                        <van-radio-group v-model="typeRadioModal" shape='square' class='flex-align-center'>
                            <van-radio name="1">团队志愿
                                <span
                                        slot="icon"
                                        slot-scope="props"
                                        :class="[props.checked ?'active':'normal','sexRadio']">
                                <i></i>
                            </span>
                            </van-radio>
                            <van-radio name="2">自由志愿
                                <span
                                        slot="icon"
                                        slot-scope="props"
                                        :class="[props.checked ?'active':'normal','sexRadio']">
                                <i></i>
                            </span>
                            </van-radio>
                        </van-radio-group>
                    </div>
                </van-field>
            </div>
            <van-field 
                required
                size='large'
                label='教育程度：'
                placeholder="请选择"
                :value='educationLevel.value.name'
                @click="openPicker('educationLevel');"
                readonly
                clickable
                :left-icon="IconModal.educationLevelIcon"
                right-icon='arrow-down'
            />
            <van-field 
                required
                size='large'
                placeholder="请选择"
                :value='profession.value.name'
                @click="openPicker('profession');"
                readonly
                clickable
                :left-icon="IconModal.professionIcon"
                right-icon='arrow-down'
                
            >
                <div slot='label' class="diy-label">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</div>
            </van-field>
            <van-field 
                required
                size='large'
                label='所属区域：'
                placeholder="请选择"
                :value='areaModal.area.name+" "+areaModal.village.name'
                @click="areaListShow=true;getArea()"
                readonly
                clickable
                :left-icon="IconModal.addressIcon"
                right-icon='arrow-down'
            />
            
            <van-field 
                required
                clickable
                clearable
                type='tel'
                size='large'
                maxlength='11'
                label='手机号码：'
                v-model="userphone" 
                :left-icon="IconModal.userphoneIcon"
            />
            <van-field
                required
                clickable
                clearable
                
                size='large'
                maxlength='6'
                label='验 证 码：'
                v-model="mobileCode"
                :left-icon="IconModal.mobileCodeIcon"
            >
                <van-button slot="button" size="small" :disabled="disabled" :type="disabledText.indexOf('验证码') !== -1 ? 'danger': 'default'" @click="send">{{disabledText}}</van-button>
            </van-field>
            <van-field
                required
                clickable
                clearable
                type='password'
                size='large'
                maxlength='32'
                label='登录密码： '
                v-model="userPsd" 
                :left-icon="IconModal.userPsdIcon"
            />
            <van-field 
                required
                clickable
                clearable
                type='password'
                size='large'
                maxlength='32'
                label='确认密码：'
                v-model="userConfirmPsd" 
                :left-icon="IconModal.userPsdConfirmIcon"
            />
        </div>
        <div class="bot">
            <van-button color="#F65D5D" block :loading='btnLoading'
                @click="rgisterAction"
                loading-text='提交中'
            >提交注册</van-button>
            <router-link to='/login' class="login" tag="p">
                立即登录>
            </router-link>
        </div>
        <van-popup v-model="showPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="pickerColumns"
                @cancel="showPicker = false"
                @confirm="pickerConfirm"
            />
        </van-popup>  
        <van-popup v-model="areaListShow" position="bottom">
            <van-area :area-list="areaList" 
            columns-num='2'
            @cancel='areaListShow=false'
            @confirm='confirmArea'
            v-show="areaListShow"/>      
        </van-popup>
    </div>
</template>

<script>
import {PHONE_CHECK} from '@/utils/utils'
export default {
    data(){
        return{
            disabled: false,
            disabledText: '发送验证码',
            username:'',
            nickName:'',
            sexRadioModal:'1',
            typeRadioModal:'1',
            userphone:'',
            mobileCode:'',
            userPsd:'',
            userConfirmPsd:'',
            educationLevel:{
                value:{},
                data:[]
            },
            profession:{
                value:{},
                data:[]
            },
            address:{},
            IconModal:{
                nameIcon:require('../../../static/img/register/xm@2x.png'),
                nickNameIcon:require('../../../static/img/register/nc@2x.png'),
                sexIcon:require('../../../static/img/register/xb@2x.png'),
                educationLevelIcon:require('../../../static/img/register/jy@2x.png'),
                professionIcon:require('../../../static/img/register/zy@2x.png'),
                userphoneIcon:require('../../../static/img/register/sj@2x.png'),
                mobileCodeIcon:require('../../../static/img/register/sj@2x.png'),
                userPsdIcon:require('../../../static/img/register/dlmm@2x.png'),
                userPsdConfirmIcon:require('../../../static/img/register/dlmm@2x.png'),
                addressIcon:require('../../../static/img/register/qy@2x.png'),

            },
            showPicker:false,//底部picker modal
            pickerColumns:[

            ],//底部picker数据
            pickerType:'',
            btnLoading:false,
            areaModal:{
                area:{name:''},
                village:{name:''}
            },
            areaListShow:false,
            curAreadata:{},
            areaList:{
                province_list: {
                    
                },
                city_list: {
                   
                },
                county_list: {
                    110101: '东城区',
                }
            }
            
        }
    },
    created(){
        this.getEducationLevel()
        this.getOccupation()
        // this.getArea()
    },
    methods:{
        openPicker(type){
            this.pickerColumns=this[type].data;
            this.pickerType=type
            this.showPicker = true;

        },
        pickerConfirm(val,index){
            this.$set(this[this.pickerType],'value',val)
            this.showPicker=false
        },
        vaildSubmit(){
            let submitObj={
                username:'真实姓名',
                nickName:'昵称',
                sexRadioModal:'性别',
                typeRadioModal:'志愿类型',
                educationLevel:{vaild:x=>!!x.id,text:'教育程度'},
                profession:{vaild:x=>!!x.id,text:'职业'},
                areaModal:{vaild:x=>x.area.code&&x.village.code,text:'所属区域'},
                userphone:{vaild:x=>PHONE_CHECK(x),text:'手机号码'},
                mobileCode:{vaild:x=>x.length<=6,text:'验证码'},
                userPsd:{vaild:x=>x.length>=6,text:'登录密码'},
                userConfirmPsd:{vaild:x=>x.length>=6,text:'确认密码'}
            }
            let flag=0
            for(var i in submitObj){
                console.log(this[i],i)
                console.log('null==>'+i)
                if(typeof submitObj[i].vaild==='function'){
                    if(!submitObj[i].vaild(this[i].value||this[i])){
                        this.$toast(`请填写正确的${submitObj[i].text}`);
                        return false
                        break;
                    }
                }
                if(!this[i]){
                    this.$toast(`请填写正确的${submitObj[i]||submitObj[i].text}`)
                    break;
                }
                flag++
            }
            console.log(Object.keys(submitObj).length,flag)
            return Object.keys(submitObj).length==flag
        },
        //提交注册
        async rgisterAction(){
            let vaildResult=this.vaildSubmit()
            if(!vaildResult){
                return 
            }
            this.btnLoading=true
            try {
                await this.$http({
                    method:'api.user.register',
                    realName:this.username,
                    nickName:this.nickName,
                    sex:this.sexRadioModal,
                    type:this.typeRadioModal,
                    mobileCode:this.mobileCode,
                    mobile:this.userphone,
                    password:this.userPsd,
                    educationLevel:this.educationLevel.value.id,
                    occupation:this.profession.value.id,
                    area:this.areaModal.area.code,
                    village:this.areaModal.village.code
                })
                this.$toast({
                    duration:1000,
                    message:'注册成功',
                    onClose:()=>{
                        this.$router.replace('/login')
                    }
                })
                this.btnLoading=false
            } catch (error) {
                this.btnLoading=false
            }

        },
        async getEducationLevel(){
            let res=await this.$http({
                method:'api.index.getEducationLevel',
            },true)
            this.educationLevel.data=res.data.list.map(item=>{
                item.text=item.name;
                return item
            })
        },
        async getOccupation(){
            let res=await this.$http({
                method:'api.index.getOccupation',
            },true)
            this.profession.data=res.data.list.map(item=>{
                item.text=item.name;
                return item
            })
        },
        confirmArea(data){
            this.areaListShow=false;
            this.curAreadata=data;
            console.log(data)
            if(!data[0]||!data[1]){
                this.$toast('请选择区域')
                return
            }
            
            this.areaModal.area=data[0]
            this.areaModal.village=data[1]
            
        },
        async getArea(){
            if(Object.keys(this.areaList.province_list).length == 0){
                let res=await this.$http({
                    method:'api.index.getArea',
                },true)
                const {areaList,villageList}=res.data
                let obj={
                    province_list:areaList,
                    city_list:villageList
                }
                // this.areaList=obj
                this.areaList.province_list=areaList
                this.areaList.city_list=villageList
                this.$set(this.areaList,'province_list',areaList)
                this.$set(this.areaList,'city_list',villageList)
            }
            
            console.log(this.areaList)
        },
        async send(){
            if(this.disabled){
                return;
            }
            this.disabled = true;
            this.disabledText = '发送中..';
            await this.$http({
                method:'api.user.getMobileCode',
                mobile: this.userphone,
            })
            let time = 60;
            let interval = setInterval(()=>{
                this.disabledText = ''+time--;
                if(time < 0){
                    clearInterval(interval);
                    this.disabled = false;
                    this.disabledText = '发送验证码';
                    time = 60;
                }
            }, 1000);
            this.$toast('已发送验证码')
        }
    }
}
</script>

<style lang='scss' scoped>
$themeColor:#CD595B;
.register-wrap{
    padding: 0 .4rem .9rem;
}
/deep/ .register-wrap{
.van-cell{padding-left: 0;padding-right: 0;}
.van-icon__image{margin-right: .12rem;}
.van-cell__title span,.diy-label{color: #666666;font-size: 14px;}
.van-cell--required::before{left: .4rem;}
.van-field__label{width: auto;}
.van-cell__value{border: solid 1px #CBCACA;border-radius: .1rem;height: .68rem;padding-right: .2rem;
    margin-top: -.1rem;
    .van-field__control{height: .68rem;padding-left: .2rem;}
}
.van-radio{margin-right: .4rem;}
}
/deep/ .spical-field .van-cell__value{border: none}
.spical-field-input{height: 100%;}
.sexRadio{
    width: .3rem;height: .3rem;border-radius: 50%;padding:3px; background: #fff;border:solid 2px #CBCACA;
    display: inline-block;box-sizing: border-box;margin-right:.22rem;
    i{background: #CBCACA;display: block;width: 100%;height: 100%;border-radius:inherit;}
    
}
.sexRadio.active{border-color: $themeColor;i{background:$themeColor}}
.bot{padding: 0 .4rem;padding-bottom:.9rem;
.login{color: #CD595B;text-align: center;font-size: 14px;margin-top: .37rem;}
}
</style>